<template>
	<view>
		<page-head headTitle="编辑资料" :returnButton="true" @clickLeftReturn="clickLeftReturn"></page-head>
		<picture-upload class="m-t9"></picture-upload>
		<view class="flex p-l-r3 p-t-b4 bg-white align-center justify-between border-botton">
			<text class="fs-3 letter-s3 width-1">年代</text>
			<view class="flex align-center">
				<view class="flex address">
					<text class="flex fs-3 m-r1 info white-space">70</text>
				</view>
				<image class="slide-downward" src="/static/images/slide-downward.png"></image>
			</view>
		</view>
		<view class="flex p-l-r3 p-t-b4 bg-white align-center justify-between border-botton">
			<text class="fs-3 letter-s3 width-1">性别</text>
			<view class="flex align-center" >
				<radio-group @change="radioChange" class="flex">
					<label  v-for="(item, index) in items" :key="item.value">
						<view class="flex align-center ml">
							<radio style="transform:scale(0.7)" color="#ffeb0f"  :value="item.value" :checked="index === current" />
							<view class="fs-3">{{item.name}}</view>
						</view>
					</label>
				</radio-group>
			</view>
		</view>
		<view class="flex p-l-r3 p-t-b4 bg-white align-center">
			<text class="fs-3 width-1">服务语言</text>
		</view>
		<view class="p-l-r3 bg-white padding-bottom p-b5 border-botton">
			<textarea class="border width bg-textarea height p-t-b4 p-l-r fs-3" placeholder-class="color-t" placeholder="请输入个人标签,多个标签用空格隔开..."></textarea>
		</view>
		<view class="flex p-l-r3 p-t-b4 bg-white align-center">
			<text class="fs-3 width-1">服务城市</text>
		</view>
		<view class="p-l-r3 bg-white padding-bottom p-b5 border-botton">
			<textarea class="border width bg-textarea height p-t-b4 p-l-r fs-3" placeholder-class="color-t" placeholder="请输入个人标签,多个标签用空格隔开..."></textarea>
		</view>
		<view class="flex p-l-r3 p-t-b4 bg-white align-center">
			<text class="fs-3 letter-s3 width-1">标签</text>
		</view>
		<view class="p-l-r3 bg-white padding-bottom p-b5 border-botton">
			<textarea style="height: 220rpx;" class="border width bg-textarea p-t-b4 p-l-r fs-3" placeholder-class="color-t" placeholder="请输入个人标签,多个标签用空格隔开..."></textarea>
		</view>
		<view class="flex p-l-r3 p-t-b4 bg-white align-center">
			<text class="fs-3 letter-s3 width-1">相册</text>
		</view>
		<view class="p-l-r3 bg-white padding-bottom p-b5">
			<image src="/static/images/upload-photos.png" class="upload-photos">
		</view>
		<bright-button title="提交" class="m-t-b"></bright-button>
	</view>
</template>

<script>
import pageHead from '@/components/common/page-head.vue'
import brightButton from '@/components/common/bright-button.vue'
import pictureUpload from '@/components/common/picture-upload.vue'
	export default {
		components:{
			pageHead,
			brightButton,
			pictureUpload
		},
		data() {
			return {
				items:[{
					value: '男',
                    name: '男'
                },
				{
					value: '女',
				    name: '女'
				}],
				current: 0
			}
		},
		methods: {
			radioChange(evt) {
			            for (let i = 0; i < this.items.length; i++) {
			                if (this.items[i].value === evt.target.value) {
			                    this.current = i;
			                    break;
			                }
			            }
			    },
			clickLeftReturn(){
				uni.navigateTo({
				    url: '../../store/store-attestation/store-attestation'
				});
			}
			
		}
	}
</script>

<style scoped>
.m-t-b{margin-top: 150rpx;margin-bottom: 60rpx;}
.address{width: 460rpx;justify-content:flex-end;}
.info{max-width: 400rpx;}
.slide-downward{width: 24rpx;height: 18rpx;}
.upload-photos{width: 202rpx;height: 200rpx;}
</style>
